<template>
  <view class="main">
    <view
      class="item dispaly-center"
      @click="$goUrl(item.path)"
      v-for="(item, index) in msgSetList"
      :key="item.type"
    >
      <view class="left">
        <view
          class="icon dispaly-align-center"
          :style="{ background: item.bgColor }"
        >
          <image :src="item.icon" mode="aspectFill" />
        </view>
        <view class="dot" v-if="item.dot"></view>
      </view>
      <view class="right">
        <view class="name">{{ item.name }}</view>
        <view class="tip">{{ item.tip }}</view>
      </view>
    </view>

    <view class="friend-data">
      <view class="friend-data-list">
        <view
          class="friend-each"
          @click="detailChange(s)"
          v-for="(s, k) in friendData"
        >
          <view class="friend-content">
            <view class="friend-content-left-image">
              <image :src="s.avatar" mode="" />
            </view>
            <view class="friend-content-nickName">
              <view class="nickName">
                <view>
                  <text>{{ s.nickName }}</text>
                  <text style="margin-left: 20rpx">{{ s.newCreateTime }}</text>
                </view>
                <view>
                  <text @click.stop.prevent="deleteFriendChange(s)">删除</text>
                </view>
              </view>
              <view class="friend-text">
                <text>{{
                  s?.content.split("").length > 20 ? "图片" : s.content
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  getFriendPage,
  getSystemMessage,
  myChat,
  deleteApply,
} from "@/api/apiList";
import { onShow } from "@dcloudio/uni-app";

const msgSetList = ref([
  {
    name: "好友申请",
    path: "/pages/message/pages/friendApplication",
    tip: "好友申请",
    type: "sq",
    icon: "https://qunyin.hihink.com/icon/sq.svg",
    dot: false,
    bgColor: "#eda250",
  },
  {
    name: "系统消息",
    tip: "系统消息",
    path: "/pages/message/pages/systemMsg",
    type: "xt",
    icon: "https://qunyin.hihink.com/icon/xt.svg",
    dot: false,
    bgColor: "#51a051",
  },
  // { name: '社区助手', tip: '社区助手', path: '/pages/message/pages/communityAssistant', type: 'sqs', icon: 'https://qunyin.hihink.com/icon/sqs.svg', dot: false, bgColor: '#3d82e7' },
  {
    name: "通讯录助手",
    tip: "通讯录助手",
    path: "/pages/message/pages/contactList",
    type: "zs",
    icon: "https://qunyin.hihink.com/icon/zs.svg",
    dot: false,
    bgColor: "#6eb4f9",
  },
]);

const friendListData = async () => {
  const getFriendPageData = await getFriendPage({
    status: 0,
    pageSize: 9999,
    pageNum: 1,
  });
  if (getFriendPageData.code == 200) {
    msgSetList.value[0].dot = getFriendPageData?.rows.length ? true : false;
  }
};

const getSystem = async () => {
  const response = await getSystemMessage({
    pageSize: 999,
    pageNum: 1,
    noticeType: 2,
  });
  if (response.code == 200) {
    msgSetList.value[1].dot = response?.rows.length ? true : false;
  }
};
const friendData = ref([]);

onShow(() => {
  getSystem();
  friendListData();
  myChatChange();
});

const myChatChange = async () => {
  const response = await myChat({});
  if (response && response.code == 200) {
    friendData.value = response.rows;
  }
};

const detailChange = (s) => {
  uni.navigateTo({
    url: `/pages/circle/pages/chat?id=${s.userId}&name=${s.nickName}`,
  });
};

const deleteFriendChange = (s) => {
  uni.showModal({
    title: "删除好友",
    content: "是否删除这个好友",
    success: async (res) => {
      if (res.confirm) {
        friendData.value = [];
        const response = await deleteApply({ id: s.id });
        if (response.code == 200) {
          uni.showToast({
            title: "删除好友成功",
            icon: "none",
          });
          myChatChange();
        }
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.main {
  .item {
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #eee;

    .left {
      margin-right: 20rpx;
      position: relative;

      .icon {
        width: 84rpx;
        height: 84rpx;
        border-radius: 8rpx;

        image {
          width: 44rpx;
          height: 44rpx;
        }
      }

      .dot {
        width: 24rpx;
        height: 24rpx;
        background-color: #e83626;
        border-radius: 50%;
        position: absolute;
        top: -12rpx;
        right: -12rpx;
      }
    }

    .right {
      .name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #111111;
      }

      .tip {
        font-family: PingFang SC Regular;
        font-size: 22rpx;
        color: #777777;
      }
    }
  }
}
.friend-data-list {
  .friend-each {
    margin: 0 15px;
    .friend-content {
      display: flex;
      margin-top: 10px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;
      align-items: flex-start;
      .friend-content-left-image {
        display: flex;
        align-items: center;
        image {
          width: 50px;
          height: 50px;
        }
      }
      .friend-content-nickName {
        flex: 1;
        margin-left: 4px;
        .nickName {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text {
            font-size: 30rpx;
            &:nth-last-child(1) {
              font-size: 26rpx;
              color: #777;
            }
          }
        }
        .friend-text {
          margin-top: 8px;
          text {
            font-size: 28rpx;
            color: #777777;
          }
        }
      }
    }
  }
}
</style>
